<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highsecondary" content="no">
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">

    <title>工单管理列表</title>
    <link href="../lib/fonts/material-icons.css?family=Material+Icons" rel="stylesheet">
    <link href="../lib/css/animate.min.css" rel="stylesheet">
    <link href="../lib/css/quasar.mat.rtl.min.css" rel="stylesheet" type="text/css">
    <style>
      [v-cloak] { display: none }
    </style>
  </head>
  <body>
    <div id="q-list" v-cloak>
      <q-tabs inverted position="top" class="fixed-top">
        <q-tab default slot="title" name="tab-2" label="OYO酒店"></q-tab>
      </q-tabs>
      <q-card class="bg-white no-shadow full-width" style="padding: 48px 0">
        <q-card-main class="q-pa-sm">
          
          <q-list>
            <q-item separator v-for="(item, index) in list" :key="index">
              <q-item-main>
                <q-item-title label>工单编号：{{ item.col1 }}</q-item-title>
                <q-item-separator></q-item-separator>
                <q-item-title sublabel>
                  <div class="row justify-between" style="font-size: 13px">
                    <div class="col-6 q-mt-xs">
                      城市：<span class="text-faded">{{ item.col2 }}</span>
                    </div> 
                    <div class="col-6 q-mt-xs">
                      酒店：<span class="text-faded">{{ item.col3 }}</span>
                    </div>
                    <div class="col-6 q-mt-xs">
                      拍摄类型：<span class="text-faded">{{ item.col5 }}</span>
                    </div>
                    <div class="col-6 q-mt-xs">
                      CRS ID：<span class="text-faded">{{ item.col4 }}</span>
                    </div>
                  </div>
                </q-item-title>
              </q-item-main>
            </q-item>
          </q-list>
          <div class="row">
              <q-btn class="full-width q-mt-sm" color="secondary">新增工单</q-btn>
              <q-btn class="full-width q-mt-sm" color="primary">新增补开工单</q-btn>
            </div>
        </q-card-main>
      </q-card>
      <q-tabs inverted position="bottom" class="fixed-bottom">
        <q-tab default count="2" slot="title" name="tab-1" label="供应商确认状态"></q-tab>
        <q-tab slot="title" name="tab-2" label="TR确认状态"></q-tab>
        <q-tab slot="title" name="tab-3" label="摄影师提交状态"></q-tab>
        <q-tab slot="title" name="tab-4" label="TR审核状态"></q-tab>
      </q-tabs>
    </div>
    
    <!-- ie-polyfill 、 vue.js and quasar-framework -->
    <script src="../lib/js/quasar.ie.polyfills.umd.min.js"></script>
    <script src="../lib/js/vue.js"></script>
    <script src="../lib/js/quasar.mat.umd.min.js"></script>
    <!-- quasar i18n zh-hans -->
    <script src="../lib/lang/zh-hans.js"></script>
    <!-- vue-i18n for application's internationalization -->
    <script src="../lib/js/vue-i18n.js"></script>
    <script>
      // quasar components use
      Quasar.i18n.set(Quasar.i18n['zhHans'])
			new Vue({
        el: '#q-list',
				data: function() {
					return {
            isShowMoreSearch: false,
            searchForm: {
              name: ''
            },
            list: [
              {
                col1: '001',
                col2: '上海',
                col3: '冠月精品酒店',
                col4: '90089',
                col5: '新店拍摄',
                col6: '平台供应商',
                col7: 'XX影楼',
                col8: 'yinglou@163.com',
                col9: '2018年11月6日',
                col10: '1',
                col11: '2018年11月7日',
                col12: '2018年11月7日',
                col13: '2018年11月7日',
                col14: '未提交PTI审核'
              },
              {
                col1: '002',
                col2: '上海',
                col3: '上海精品酒店',
                col4: '80998',
                col5: '新店拍摄',
                col6: '平台供应商',
                col7: 'XX影楼',
                col8: 'shanghaiyinglou@qq.com',
                col9: '2018年11月6日',
                col10: '1',
                col11: '2018年11月7日',
                col12: '2018年11月7日',
                col13: '2018年11月7日',
                col14: '通过'
              },
              {
                col1: '003',
                col2: '苏州',
                col3: '苏州度假酒店',
                col4: '17098',
                col5: '新店拍摄',
                col6: '城市供应商',
                col7: 'XX影楼',
                col8: 'suzhouyinglou@qq.com',
                col9: '2018年11月6日',
                col10: '1',
                col11: '2018年11月7日',
                col12: '2018年11月7日',
                col13: '2018年11月7日',
                col14: '通过'
              },
              {
                col1: '004',
                col2: '苏州',
                col3: '吴江度假酒店',
                col4: '90090',
                col5: '补拍',
                col6: '个人摄影师',
                col7: 'XX影楼',
                col8: 'wujiang@qq.com',
                col9: '2018年11月6日',
                col10: '2',
                col11: '2018年11月7日',
                col12: '2018年11月7日',
                col13: '2018年11月7日',
                col14: '驳回'
              }
            ],
            selected: []
          }
				},
				computed: {
					columns: function() {
						return [
							{
                name: 'action',
                label: '操作',
                align: 'center',
                field: 'action'
              },	
              {
                name: 'col1',
                label: '工单编号',
                align: 'center',
                field: 'col1'
              },
              {
                name: 'col2',
                label: '城市',
                align: 'center',
                field: 'col2'
              },
              {
                name: 'col3',
                label: '酒店名称',
                align: 'center',
                field: 'col3'
              },
              {
                name: 'col4',
                label: 'CRS ID',
                align: 'center',
                field: 'col4'
              },
              {
                name: 'col5',
                label: '拍摄类型',
                align: 'center',
                field: 'col5'
              },
              {
                name: 'col6',
                label: '接单供应商',
                align: 'center',
                field: 'col6'
              },
              {
                name: 'col7',
                label: '供应商推荐人',
                align: 'center',
                field: 'col7'
              },
              {
                name: 'col8',
                label: '供应商推荐人邮件',
                align: 'center',
                field: 'col8'
              },
              {
                name: 'col9',
                label: '摄影需求下单时间',
                align: 'center',
                field: 'col9'
              },
              {
                name: 'col10',
                label: '摄影需求材料次数',
                align: 'center',
                field: 'col10'
              },
              {
                name: 'col11',
                label: 'TR提交拍摄时间',
                align: 'center',
                field: 'col11'
              },
              {
                name: 'col12',
                label: '供应商拍摄时间',
                align: 'center',
                field: 'col12'
              },
              {
                name: 'col13',
                label: '供应商交片时间',
                align: 'center',
                field: 'col13'
              },
              {
                name: 'col14',
                label: 'PTI审核结果',
                align: 'center',
                field: 'col14'
              }
						]
					}
        },
        watch: {
          
        },
        created: function() {
          
        },
				methods: {
					
				}
			})
    </script>
  </body>
</html>